<template>
    <div>
      <div class="kong"></div>
    <!-- 轮播 -->
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, id) in images" :key="id">
          <img v-lazy="image.img" />
        </van-swipe-item>
      </van-swipe>
      <!-- 九宫格 -->
      <van-grid :column-num="3">
        <van-grid-item v-for="(item,id) in grids" :key="id" :icon="item.icon" :text='item.text'  :to="item.path"/>
      </van-grid>
    </div>
</template>

<script>
export default {
  data () {
    return {
      images: [

      ],
      grids: [
        {
          id: 1,
          icon: require('../../assets/menu1.png'),
          text: '新闻资讯',
          // path:'/home/'
          path: '/newslist'
        },
        {
          id: 2,
          icon: require('../../assets/menu2.png'),
          text: '图片分享',
          path: '/images'
        },
        {
          id: 3,
          icon: require('../../assets/menu3.png'),
          text: '商品购买',
          path: '/goods/list'
        },
        {
          id: 4,
          icon: require('../../assets/menu4.png'),
          text: '留言反馈',
          path: '#'
        },
        {
          id: 5,
          icon: require('../../assets/menu5.png'),
          text: '视频专区',
          path: '#'
        },
        {
          id: 6,
          icon: require('../../assets/menu6.png'),
          text: '联系我们',
          path: '/map'
        }
      ]
    }
  },
  methods: {
    async getSwipeList () {
      const { data: res } = await this.$http.get('/api/getlunbo')
      this.images = res.message
      this.images[1].img = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585132199292&di=b14ced92ca302a5de6478e0f50faba30&imgtype=0&src=http%3A%2F%2Fwx3.sinaimg.cn%2Flarge%2F007ydh2pgy1g1dwbvt5p1j30rs0fmwup.jpg'
    }
  },
  created () {
    this.getSwipeList()
  }
}
</script>

<style lang="less" scoped>
.van-swipe {
  height: 200px;
  img {
    width: 100%;
    height: 200px;
  }
}
.van-grid {
  height: 136px;
  .van-grid-item img {
    width: 60px !important;
}
  .van-grid-item__content {
        display: flex !important;
  }
  .van-grid-item[data-v-74b1de62] {
    width: 33.333333%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
}
.van-grid-item {
    position: relative;
    box-sizing: border-box;
}
.kong{
  height: 1.06667rem;
}
</style>
